<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ID 焦点定位</title>
<jsp:include page="common.jsp"></jsp:include>
</head>
<body>
    <div class="layui-tab" lay-filter="test1">
	  <ul class="layui-tab-title">
	    <li class="layui-this" lay-id="111" >文章列表</li>
	    <li lay-id="222">发送信息</li>
	    <li lay-id="333">权限分配</li>
	    <li lay-id="444">审核</li>
	    <li lay-id="555">订单管理</li>
	  </ul>
	  <div class="layui-tab-content">
	    <div class="layui-tab-item layui-show">1</div>
	    <div class="layui-tab-item">2</div>
	    <div class="layui-tab-item">3</div>
	    <div class="layui-tab-item">4</div>
	    <div class="layui-tab-item">5</div>
	  </div>
	</div>
	
	<script>
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
		  var layid = location.hash.replace(/^#test1=/, '');
		  element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
		  
		  //监听Tab切换，以改变地址hash值
		  element.on('tab(test1)', function(){

		    location.hash = 'test1='+ this.getAttribute('lay-id');
		  });
		});
	</script>    
</body>
</html>